<template>
    <el-dialog :model-value="modelValue" title="编辑用户信息" @close="closeDialog">
        <el-form :model="editInfo">
            <el-form-item label="用户昵称" label-width="120px">
                <el-input v-model="editInfo.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户角色" label-width="120px">
                <el-select v-model="editInfo.role" multiple placeholder="请选择角色">
                    <el-option
                        v-for="item in roleWithAuthList"
                        :key="item.roleId"
                        :label="item.roleName"
                        :value="item.roleId"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="ensureEditUser">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { IEditUser } from '@/types/common';
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    roleWithAuthList: {
        type: Array,
        default: () => []
    },
    editUser: {
        type: Object,
        default: () => {}
    }
});
const editInfo = reactive<IEditUser>({
    id: 0,
    nickName: '',
    userName: '',
    role: []
});
watch(
    () => props.editUser,
    (v) => {
        Object.assign(editInfo, v);
    },
    { deep: true }
);
const emits = defineEmits(['update:modelValue', 'submitEdit']);
const closeDialog = () => {
    emits('update:modelValue', false);
};
const ensureEditUser = () => {
    emits('submitEdit', editInfo);
};
</script>
